<template>
  <transition name="slide">
    <music-list :title="title" :bg-image="bgImage" :songs="listDetail" :rank="rank"></music-list>
  </transition>
</template>

<script>
import MusicList from '@/components/music-list/music-list'
import { mapGetters } from 'vuex'
import { createSongs } from '@/common/js/song'

export default {
  data () {
    return {
      listDetail: [],
      rank: true
    }
  },
  computed: {
    title () {
      return this.topList.name
    },
    bgImage () {
      if (this.listDetail.length) {
        return this.listDetail[0].image
      } else {
        return this.topList.coverImgUrl
      }
    },
    ...mapGetters([
      'topList'
    ])
  },
  created () {
    this._normalizeSongs(this.topList.tracks)
    console.log(this.topList)
  },
  components: {
    MusicList
  },
  methods: {
    _normalizeSongs (list) {
      if (!this.topList.id) {
        this.$router.push('/rank')
        // this.$router.go(0)
        return
      }
      var ret = []
      list.forEach((item) => {
        ret.push(createSongs(item))
      })
      // if (ret.length > 50) {
      //   ret = ret.slice(0, 49)
      // }
      this.listDetail = ret
      console.log(ret)
    }
  }
  // watch: {
  //   $route () {
  //     this._normalizeSongs(this.topList.tracks)
  //   }
  // }
}
</script>

<style lang="less" scoped>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease
}
.slide-enter, .slide-leave-to {
  transition: translate3d(100%, 0, 0)
}
</style>
